<template>
  <view class="content">
    <!-- <view class="top" :style="{ paddingTop: $util.getStatusBarHeight() }">
      <view class="back" @click="$util.goUrl(0)">
        <text class="iconfont icon-left" />
      </view>
      <picker
        mode="date"
        fields="month"
        @cancel="changeCanvasFlag"
        :value="date"
        :start="startDate"
        :end="endDate"
        @change="bindDateChange"
      >
        <view style="font-weight: bold">
          <text>{{ date }}</text>
          <text class="iconfont icon-xia"></text>
        </view>
      </picker>
      <text class="qushi">查看趋势图<text class="iconfont icon-right" /></text>
    </view> -->
    <view class="top">
      <!-- {
          title: "建档时间",
          key: "wewew",
          type: "daterange",
          skip: true,
        }, -->
      <view style="width: 60vw">
        <datetime-picker
          :type="'daterange'"
          :hide-second="true"
          :clear-icon="false"
          :border="false"
          :value="date"
          :start="startDate"
          :end="endDate"
          @change="bindDateChange"
        />
      </view>
      <view>
        <subsection
          :width="'30vw'"
          :height="'47rpx'"
          :selectIndex="type"
          :itemList="['表格', '图表']"
          @selected="changeType"
        />
      </view>
    </view>
    <swiper :style="{ height: `calc(100vh - 130rpx)` }" :current="type" @change="swiperChange">
      <swiper-item>
        <my-table ref="table" />
      </swiper-item>
      <swiper-item>
        <my-charts ref="charts" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import myTable from "./components/table/index.vue";
import myCharts from "./components/charts/index.vue";
import datetimePicker from "@/components/basics-form/components/uni-datetime-picker/uni-datetime-picker.vue";
import subsection from "@/components/basics-form/components/subsection/subsection.vue";

export default {
  components: { myTable, myCharts, datetimePicker, subsection },
  data() {
    return {
      type: 0,
      date: [],
      patientId: uni.getStorageSync("patientId"),
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  watch: {
    date(val) {
      this.$nextTick(() => {
        this.$refs.table.init(val, this.patientId);
        this.$refs.charts.init(val, this.patientId);
      });
    },
  },
  onShareAppMessage() {
    return this.$util.returnShareObj();
  },
  onPullDownRefresh() {
    this.$refs.table.init(this.date, this.patientId);
    this.$refs.charts.init(this.date, this.patientId);
  },
  onLoad(options) {
    if (options.patientId) {
      this.patientId = options.patientId;
    }
    this.date = [this.getDate("monthFirstDay"), this.getDate("end")];
  },
  methods: {
    changeType(index) {
      this.type = index;
    },
    swiperChange(e) {
      this.type = e.detail.current;
    },
    bindDateChange(e) {
      this.date = e;
    },
    getDate(type) {
      let date = null;
      if (type != "start") {
        date = new Date();
      } else {
        return "2021-01-01";
      }
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = 1;
      if (type == "end") {
        day = date.getDate();
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  background: $back-grey-color;
  min-height: 100vh;
  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40rpx 0;
  }
}
</style>
